<template>
  <el-row>
    <el-col :span="12">
      <el-card class="el-card">
        <div class="header">
          <p>订单总量</p>
          <div class="Totalorderstime">2023-03 - 2023-08</div>
        </div>
        <p class="Totalorderstype">单位：笔</p>
        <div class="order-static">
          <div class="item">
            <div class="num">{{ maxMount }}</div>
            <div class="label">订单最高值</div>
          </div>
          <div class="item">
            <div class="num">{{ amount }}</div>
            <div class="label">订单平均值</div>
          </div>
          <div class="item">
            <div class="num">{{ minMount }}</div>
            <div class="label">订单最低值</div>
          </div>
        </div>
        <div id="orderBase" ref="orderEcharts">
          <!-- 图表 -->
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div class="header">
          <p>订单分布</p>
          <div class="Totalorderstime">2023-03 - 2023-08</div>
        </div>
        <p class="Totalorderstype">单位：笔</p>
        <div id="area" ref="areaEcharts">
          <!-- 图表 -->
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    orderlinechart: {
      type: [Object],
      default: function() { return [] }
    }
  },
  data() {
    return {
      averTimer: null,
      maxTimer: null,
      minTimer: null,
      averageNumber: 500,
      maxNumber: 500,
      minNumber: 500,
      dateTime: []
    }
  },
  computed: {
    amount() {
      return this.averageNumber
    },
    maxMount() {
      return this.maxNumber
    },
    minMount() {
      return this.minNumber
    }
  },
  watch: {
    orderlinechart: {
      deep: true,
      handler() {
        this.dateTime = [...this.orderlinechart.monthlyOrderList]
        this.order.setOption({
          tooltip: {
            trigger: 'axis',
            textStyle: {
              width: 160,
              height: 250,
              lineHeight: 24,
              fontSize: '12'
            },
            formatter: function(params) {
              return '日期' + `<span style="margin-left:30px;color:#000">${params[0].axisValue}</span>` + '<br/>' + '订单总量' + `<span style="margin-left:10px;color:#000">${params[0].value}</span>` + '笔'
            }
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            boundaryGap: true,
            data: [this.dateTime[0].dateTime, this.dateTime[1].dateTime, this.dateTime[2].dateTime, this.dateTime[3].dateTime, this.dateTime[4].dateTime, this.dateTime[5].dateTime]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [this.dateTime[0].orderNumber, this.dateTime[1].orderNumber, this.dateTime[2].orderNumber, this.dateTime[3].orderNumber, this.dateTime[4].orderNumber, this.dateTime[5].orderNumber],
              type: 'line',
              symbol: 'circle',
              symbolSize: 6,
              itemStyle: {
                normal: {
                  color: '#e25433'
                },
                emphasis: {
                  color: '#e25433',
                  borderWidth: 6,
                  borderColor: '#e25433'
                }
              },
              animation: true,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#fffcfb' },
                      { offset: 0.5, color: '#fdf0ed' },
                      { offset: 0.7, color: '#fae9e5' },
                      { offset: 1, color: '#fbe8e4' }
                    ]
                  )
                },
                emphasis: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#fffcfb' },
                      { offset: 0.5, color: '#fdf0ed' },
                      { offset: 0.7, color: '#fae9e5' },
                      { offset: 1, color: '#fbe8e4' }
                    ]
                  )
                }
              }
            }
          ]
        })
        this.area.setOption({
          tooltip: {
            trigger: 'axis',
            textStyle: {
              width: 160,
              height: 250,
              lineHeight: 24,
              fontSize: '12'
            },
            formatter: function(params) {
              return '省份' + `<span style="margin-left:30px;color:#000">${params[0].axisValue}</span>` + '<br/>' + '订单总量' + `<span style="margin-left:10px;color:#000">${params[0].value}</span>` + '笔'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            inverse: true,
            axisTick: {
              show: false
            },
            data: ['广东', '山东', '江苏', '浙江', '河南', '四川', '湖北', '台湾', '福建', '湖南', '上海', '安徽', '河北', '北京', '陕西', '江西', '重庆', '辽宁', '云南', '广西', '香港', '山西', '内蒙古', '贵州', '新疆', '天津', '黑龙江', '吉林', '甘肃', '海南', '宁夏', '青海', '西藏', '澳门']
          },
          series: [
            {
              name: '2011',
              type: 'bar',
              data: [2500, 2400, 2200, 2100, 1900, 1700, 1600, 1400, 1300, 1200, 1050, 950, 800, 700, 600, 550, 450, 400, 390, 380, 370, 350, 320, 300, 280, 260, 240, 220, 200, 180, 160, 140, 120, 100],
              itemStyle: {
                normal: {
                  color: '#e15536'
                }
              }
            }
          ]
        })
      }
    }
  },
  mounted() {
    this.orderAverageNumber()
    this.orderMaxNumber()
    this.orderMinNumber()
    this.order = echarts.init(this.$refs.orderEcharts)
    this.area = echarts.init(this.$refs.areaEcharts)
  },
  methods: {
    orderAverageNumber() {
      this.averTimer = setInterval(() => {
        this.averageNumber += 100
        if (this.averageNumber > this.orderlinechart.orderAverageNumber) {
          this.averageNumber = this.orderlinechart.orderAverageNumber
          clearInterval(this.averTimer)
          this.averTimer = null
        }
      }, 10)
    },
    orderMaxNumber() {
      this.maxTimer = setInterval(() => {
        this.maxNumber += 100
        if (this.maxNumber > this.orderlinechart.orderMaxNumber) {
          this.maxNumber = this.orderlinechart.orderMaxNumber
          clearInterval(this.maxTimer)
          this.maxTimer = null
        }
      }, 10)
    },
    orderMinNumber() {
      this.minTimer = setInterval(() => {
        this.minNumber += 100
        if (this.minNumber > this.orderlinechart.orderMinNumber) {
          this.minNumber = this.orderlinechart.orderMinNumber
          clearInterval(this.minTimer)
          this.minTimer = null
        }
      }, 10)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col-12{
.el-card{
 box-shadow: none;
}
}
.el-col{
  padding: 0 12px;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  p{
  margin:0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.Totalorderstime{
  font-size: 14px;
  color: #818693;
}
}
.Totalorderstype{
  font-size: 14px;
  color: #818693;
}
.order-static{
  display: flex;
  justify-content: space-evenly;
  margin-top: 38px;
  .item{
    .num{
      font-size: 28px;
      color: #e15536;
      font-weight: 700;
      text-align: center;
      margin-bottom: 5px;
    }
    .label{
      font-size: 12px;
      color: #818693;
      text-align: center;
    }
  }
}
#orderBase{
  height: 400px;
  width: 100%;
}
#area{
  height: 480px;
  width: 100%;
}
</style>
